<template>
	<el-card>
		<!-- 搜索 -->
		<el-form v-show="showSearch" :model="searchData" inline ref="searchFormRef" id="searchForm"
			style="margin-bottom: 5px;">
			<el-form-item label="用户昵称" prop="nickName" clearable>
				<el-input v-model="searchData.nickName" placeholder="请输入用户名" clearable></el-input>
			</el-form-item>
			<el-form-item label="登录名称" prop="loginName" clearable>
				<el-input v-model="searchData.loginName" placeholder="请输入登录名"></el-input>
			</el-form-item>
			<el-form-item label="用户手机" prop="phone">
				<el-input v-model="searchData.phone" placeholder="请输入电话" clearable></el-input>
			</el-form-item>
			<el-form-item label="用户邮箱" prop="email">
				<el-input v-model="searchData.email" placeholder="请输入邮箱" clearable></el-input>
			</el-form-item>
			<el-form-item label="用户角色" prop="roleId">
				<el-select v-model="searchData.roleId" clearable>
					<el-option :label="item.name" :value="item.id" v-for="item in roleList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="用户状态" prop="state">
				<el-select v-model="searchData.state" clearable>
					<el-option v-for="(item, index) in dict.type.dictUserState" :key="index" :value="item.value"
						:label="item.label"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="Refresh" @click="resetClick">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row id="operate" style="margin-bottom: 3px;">
			<el-col :span="12">
				<el-button icon="Plus" type="primary" plain size="small" v-hasPer="['sys:use:add']"
					@click="addShowClick">新增</el-button>
			</el-col>
			<el-col :span="12">
				<right-toolbar :columns="columns" :search="true" v-model:showSearch="showSearch"
					@refresh="searchClick"></right-toolbar>
			</el-col>
		</el-row>
		<!-- 表格渲染 -->
		<gz-table ref="tableRef" :searchData="searchData" :columns="columns" api="sysUserFindAllByPage">
			<el-table-column label="操作" fixed="right" width="170px">
				<template v-slot="scope">
					<div v-if="scope.row.id != 1">
						<el-button type="text" icon="Edit" @click="editShowClick(scope.row)"
							v-hasPer="['sys:user:edit']">修改</el-button>
						<el-button type="text" icon="Edit" @click="rePasswordClick(scope.row)"
							v-hasPer="['sys:user:edit']">重置密码</el-button>
						<el-button type="text" icon="Delete" @click="deleteClick(scope.row)"
							v-hasPer="['sys:user:delByIds']">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</gz-table>

		<!-- 添加/修改 -->
		<gz-dialog @confirm="confirmClick" width="760px" ref="gzDialogRef" title="修改信息">
			<template #default>
				<el-form :model="curData" inline ref="curFormRef" label-width="95px" :show-message="false">
					<el-row>
						<el-form-item label="头像" prop="headUrl">
							<gz-upload rootPath="sys/user" v-model="curData.headUrl"></gz-upload>
						</el-form-item>
					</el-row>
					<el-form-item label="姓名" prop="nickName" required>
						<el-input v-model="curData.nickName" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="角色" prop="roleIdList" required>
						<el-select v-model="curData.roleIdList" placeholder="请选择角色" multiple>
							<el-option v-for="(item, index) in roleList" :key="index" :value="item.id"
								:label="item.name" :disabled="item.status == 1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="登录名" prop="loginName" required>
						<el-input v-model="curData.loginName" placeholder="请输入登录账号"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password" required v-if="!curData.id">
						<el-input v-model="curData.password" placeholder="请输入密码" show-password maxlength="15">
						</el-input>
					</el-form-item>
					<el-form-item label="电话" prop="phone">
						<el-input v-model="curData.phone" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="curData.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="state" required>
						<el-select v-model="curData.state" placeholder="请选择">
							<el-option value="ZHENGCHANG" label="正常"></el-option>
							<el-option value="JINYONG" label="禁用"></el-option>
						</el-select>
					</el-form-item>
					<el-row>
						<el-form-item label="备注" prop="remark">
							<el-input v-model="curData.remark" placeholder="请输入备注" type="textarea"
								:autosize="{ minRows: 2, maxRows: 4 }"></el-input>
						</el-form-item>
					</el-row>
				</el-form>
			</template>
		</gz-dialog>
	</el-card>
</template>

<script>
	export default {
		dicts: ["dictUserState"],
		data() {
			return {
				showSearch: true,
				//搜索条件
				searchData: {
					nickName: null,
					loginName: null,
					phone: null,
					email: null,
					roleId: null,
					state: null,
				},
				//添加信息数据
				curData: {
					nickName: null,
					loginName: null,
					phone: null,
					email: null,
					roleIdList: [],
					headUrl: null,
					state: "",
				},
				//表格数据
				columns: [{
						label: "姓名",
						prop: "nickName",
						isShow: true,
					},
					{
						label: "登录名",
						prop: "loginName",
						isShow: true,
					},
					{
						label: "头像",
						prop: "headUrl",
						type: "avatar",
						isShow: true,
					},
					{
						label: "手机号",
						prop: "phone",
						isShow: true,
					},
					{
						label: "邮箱",
						prop: "email",
						isShow: true,
					},
					{
						label: "角色",
						prop: "roleNameList",
						type: "tagList",
						isShow: true,
					},
					{
						label: "状态",
						prop: "state",
						type: "tag",
						isShow: true,
						options: () => {
							return this.dict.type.dictUserState
						}
					},
					{
						label: "备注",
						prop: "remark",
						isShow: true,
						type: "longText"
					},
					{
						label: "创建时间",
						isShow: true,
						prop: "createTime",
						width: "140px"
					},
				],
				roleList: [],
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.tableRef.shuaxin(this.searchData)
				this.getRoleList();
			})
		},
		methods: {
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//获取角色
			getRoleList() {
				this.$api.sysRoleFindAllByList().then(data => {
					this.roleList = data;
				});
			},
			//添加/修改
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						if (data.id) {
							await this.$api.sysUserAdd(data)
						} else {
							await this.$api.sysUserEdit(data);
						}
						this.$refs.gzDialogRef.close()
						this.searchClick()
					}
				});
			},
			//删除事件
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysUserDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},
			//新增
			addShowClick() {
				this.curData = {
					nickName: null,
					loginName: null,
					phone: null,
					email: null,
					headUrl: null,
					roleIdList: [],
					state: "ZHENGCHANG"
				}
				this.$refs.gzDialogRef.open()
			},
			//修改
			editShowClick(row) {
				this.curData = JSON.parse(JSON.stringify(row))
				this.$refs.gzDialogRef.open()
			},
			//重置密码
			rePasswordClick(row) {
				this.$common.msgBoxWarn("是否确认重置密码?", () => {
					this.$api.sysUserRePassword({
						id: row.id
					}).then(data => {
						this.$common.msgBoxSuccess("重置成功，新密码为:" + data)
					});
				}, () => {})
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
		},
	};
</script>

<style lang="scss" scoped>
	.el-form-item {
		padding-bottom: 0px;
		margin-bottom: 9px;
	}
</style>